<template>
  <div>
    <!-- 标题 -->
    <div>
      <el-form label-width="80px" size="medium ">
        <el-form-item label="标题：">
          <el-input placeholder="请输入标题" v-model="from.title"></el-input>
        </el-form-item>
        <!-- 富文本 -->
        <div class="text">
          <el-form-item label="内容：">
            <vueEditor
              debug
              ref="vRef"
              v-model="from.content"
              :option="{
                fontNames: ['宋体', '隶书'],
              }"
            />
          </el-form-item>
        </div>
        <!-- 栏目 -->
        <div class="category">
          <el-form-item label="栏目：">
            <el-checkbox-group v-model="checklist">
              <el-checkbox
                v-for="item in categorylist"
                :key="item.id"
                :label="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </div>

        <!-- 封面 -->
        <div class="upload">
          <el-form-item label="封面：">
            <el-upload
              :action="$axios.defaults.baseURL + '/upload'"
              list-type="picture-card"
              :on-remove="remove"
              :on-success="success"
              :headers="{ Authorization: token }"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="类型：">
            <el-radio-group v-model="from.type">
              <el-radio :label="1">普通文章</el-radio>
              <el-radio :label="2">视频文章</el-radio>
            </el-radio-group></el-form-item
          >
        </div>
        <el-form-item>
          <el-button type="primary" @click="sendContent">发布</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 类型 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      // 组件要求要求组成的数组
      checklist: [],
      categorylist: [],
      token: localStorage.getItem("token"),
      from: {
        title: "", //标题
        content: "", //富文本里的内容
        categories: [], //分类
        cover: [], //封面
        type: 1, //类型
      },
    };
  },
  watch: {
    checklist() {
      // 将categories放在from重中，将checklist里的分类id由数组映射成对象，传给from.categories中
      this.from.categories = this.checklist.map((num) => {
        return { id: num };
      });
    },
  },
  methods: {
    sendContent() {
      console.log(this.from);
    },
    // 调用此方法可以清空富文本内容
    clear() {
      this.$refs.vRef.clear();
    },
    remove(file, fileList) {
      console.log("删除成功");
    },
    success(res, file, fileList) {
      console.log("上传成功");
      // 将id存为对象
      const id = res.data.id;
      this.from.cover.push({
        id: id,
      });
      // console.log(res);
    },
  },
  created() {
    this.$axios({
      url: "/category",
    }).then((res) => {
      res.data.data.splice(0, 2);
      //   console.log(res.data);
      this.categorylist = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.category {
  width: 800px;
  font-size: 20px;
}
</style>